<template>
  <div style="flex: 1 1 0%; overflow: hidden auto;height:calc(100vh - 80px)" class="mt10">
    <a-menu v-model:selectedKeys="selectedKeys"
            theme="light"
            mode="inline"
            v-model:open-keys="openKeys"
            @click="handleMenuClick"
    >
      <template v-for="menu in menuList" :key="menu.id">
        <a-sub-menu :key="menu.path" v-if="menu.children && menu.children.length > 0">
          <template #title>
                <span>
                 <icon-font :type="menu.icon" />
                  <span>{{menu.name}}</span>
                </span>
          </template>
          <a-menu-item :key="cmenu.path" v-for="cmenu in menu.children">
            <span class="mr5"><icon-font :type="cmenu.icon" /></span>
            <span><nuxt-link :to="cmenu.path">{{cmenu.name}}</nuxt-link></span>
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item :key="menu.path" v-else>
          <nuxt-link :to="menu.path">
            <icon-font :type="menu.icon" />
            <span>{{menu.name}}</span></nuxt-link>
        </a-menu-item>
      </template>
    </a-menu>
  </div>
</template>
<script setup>
const route = useRoute()
import { createFromIconfontCN } from '@ant-design/icons-vue';
const IconFont = createFromIconfontCN({
  scriptUrl: '/fonts/iconfont.js',
});
const openKeys = ref([route.fullPath])
const selectedKeys = ref([route.fullPath])
const menuList = ref([{
  id: 1,
  path: "/admin",
  name: "控制面板",
  parentId: 0,
  icon: "icon-shouye",
  children: []
}, {
  id: 6,
  path: "/admin/shops",
  name: "商家管理",
  parentId: 0,
  icon: "icon-changjingliuliang",
  children: [{
    id: 67,
    path: "/admin/shops/category",
    name: "商户分类",
    parentId: 6,
    icon: "icon-ziyuan",
    children: []
  },{
    id: 66,
    path: "/admin/shops/list",
    name: "商家列表",
    parentId: 6,
    icon: "icon-ziyuan",
    children: []
  }]
},{
  id: 2,
  path: "/admin/goods",
  name: "商品管理",
  parentId: 0,
  icon: "icon-category",
  children: [{
    id: 3,
    path: "/admin/goods/list",
    name: "商品列表",
    parentId: 2,
    icon: "icon-ziyuan",
    children: []
  }]
}, {
  id: 7,
  path: "/admin/seckill/list",
  name: "秒杀商品",
  parentId: 0,
  icon: "icon-zhifujine",
  children: []
},{
  id: 8,
  path: "/admin/coupon/list",
  name: "优惠券管理",
  parentId: 0,
  icon: "icon-tubiaozhizuosvg-41",
  children: []
},{
  id: 9,
  path: "/admin/work/list",
  name: "工作流管理",
  parentId: 0,
  icon: "icon-shezhi",
  children: []
},{
  id: 10,
  path: "/admin/rbac",
  name: "权限管理",
  parentId: 0,
  icon: "icon-wodexuesheng",
  children: [{
    id: 77,
    path: "/admin/rbac/user/list",
    name: "租户列表",
    parentId: 10,
    icon: "icon-ziyuan",
    children: []
  },{
    id: 78,
    path: "/admin/rbac/role/list",
    name: "角色列表",
    parentId: 10,
    icon: "icon-ziyuan",
    children: []
  },{
    id: 79,
    path: "/admin/rbac/permission/list",
    name: "权限列表",
    parentId: 10,
    icon: "icon-ziyuan",
    children: []
  },{
    id: 80,
    path: "/admin/rbac/menu/list",
    name: "菜单管理",
    parentId: 10,
    icon: "icon-ziyuan",
    children: []
  }]
},{
  id: 11,
  path: "/admin/system",
  name: "系统设置",
  parentId: 0,
  icon: "icon-shezhi",
  children: [{
    id: 111,
    path: "/admin/system/list",
    name: "系统列表",
    parentId: 11,
    icon: "icon-ziyuan",
    children: []
  }]
},{
  id: 12,
  path: "/admin/members",
  name: "平台用户",
  parentId: 0,
  icon: "icon-yonghu",
  children: [{
    id: 122,
    path: "/admin/members/list",
    name: "会员列表",
    parentId: 12,
    icon: "icon-ziyuan",
    children: []
  },{
    id: 123,
    path: "/admin/members/list",
    name: "会员等级",
    parentId: 12,
    icon: "icon-ziyuan",
    children: []
  },{
    id: 124,
    path: "/admin/members/list",
    name: "会员权益",
    parentId: 12,
    icon: "icon-tuijian",
    children: []
  }]
},{
  id: 13,
  path: "/admin/order/list",
  name: "订单管理",
  parentId: 0,
  icon: "icon-goumaixuzhi",
  children: []
},{
  id: 14,
  path: "/admin/file/list",
  name: "文件管理",
  parentId: 0,
  icon: "icon-yulan",
  children: []
}])

const handleSelectKeyPath = (item)=>{
  var keyPath = []
  const callback = function(citem){
    citem.forEach(obj=>{
      if(obj.path == route.fullPath){
        keyPath.push(obj.path)
      }
      if(obj.children && obj.children.length > 0){
        obj.children.forEach(obj2=>{
          if(obj2.path == route.fullPath){
            keyPath.push(obj.path)
            keyPath.push(obj2.path)
          }
        })
      }
    })
  }
  callback(item)
  openKeys.value = keyPath
}

const handleMenuClick = (item)=>{
  openKeys.value = item.keyPath
}

onMounted(()=>{
  handleSelectKeyPath(menuList.value)
})
</script>